<template>
  <div v-loading="loading" class="app-container dialog">
    <div class="title">应用故障</div>
    <div class="Subhead">基本信息</div>
    <el-form :model="form" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input style="width: 760px" v-model="form.title"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="6">
          <el-form-item label="联系人员" prop="contact_person">
            <el-input v-model="form.contact_person"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="联系方式" prop="contact_information">
            <el-input v-model="form.contact_information"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="Subhead">故障信息</div>
      <el-row>
        <el-col :span="6">
          <el-form-item label="应用系统" prop="appSystem">
            <el-select clearable filterable v-model="form.appSystem" @change="changeappSystem">
              <el-option v-for="item in xtList" :key="item.id" :label="item.projectname" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="关机时间" prop="shut_down_time">
            <el-select clearable filterable v-model="form.shut_down_time">
              <el-option v-for="item in ShutDownList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="网络环境" prop="network_environment">
            <el-select clearable filterable v-model="form.network_environment">
              <el-option v-for="item in networkList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="IP地址" prop="ipLocation">
            <el-input v-model="form.ipLocation"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="6">
          <el-form-item label="运维单位" prop="om_unit">
            <el-input v-model="form.om_unit"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运维联系人" prop="om_contact_person">
            <el-input v-model="form.om_contact_person"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="运维联系方式" prop="om_contact_information">
            <el-input v-model="form.om_contact_information"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="故障现象">
        <editor
          v-model="form.fault_phenomenon"
          style="min-height: 192px; max-height: 400px; overflow-y: auto"
          :min-height="192"
          :max-height="400"
        />
      </el-form-item>
    </el-form>
    <div class="Subhead">
      附件
      <el-upload
        style="display: inline-block"
        class="upload-demo"
        accept
        list-type="picture"
        :show-file-list="false"
        ref="upload"
        :file-list="fileList"
        action=""
        :on-remove="handleChange"
        :on-change="handleChange"
        :auto-upload="false"
      >
        <img style="width: 20px; cursor: pointer; vertical-align: middle" src="../../../assets/icons/add.png" alt="" />
      </el-upload>
    </div>
    <el-table :data="fileList">
      <el-table-column label="文件名称">
        <template slot-scope="scope">
          {{ scope.row.name.substring(0, scope.row.name.lastIndexOf(".")) }}
        </template>
      </el-table-column>
      <el-table-column label="文件类型">
        <template slot-scope="scope">
          {{ scope.row.name.substring(scope.row.name.lastIndexOf(".") + 1, scope.row.name.length) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-button
            v-show="['image/jpeg', 'image/jpg', 'image/png', 'image/pdf', 'image/gif'].indexOf(scope.row.raw.type) > -1"
            size="mini"
            type="text"
            icon="el-icon-view"
            @click="previewFile(scope.row)"
            >预览
          </el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="DeleteFile(scope.row, scope.$index)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center; margin-top: 20px; margin-bottom: 20px">
      <el-button type="success" @click="sumit"> 提交工单 </el-button>
    </div>
    <el-dialog :visible.sync="dialogVisible">
      <div style="max-height: 90vh; overflow-y: scroll">
        <img width="100%" :src="dialogImageUrl" alt="" />
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { treeselect } from "@/api/system/dept";
import Editor from "@/components/Editor";
import { AllcloudUpList } from "@/api/cloud/cloud";
import { definition } from "@/api/WorkOrder/OperationMaintenance.js";
import { uploadFile } from "@/api/system/upload.js";
export default {
  name: "ApplicationFailure",
  components: {
    Editor,
  },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl: "",
      form: {
        title: "",
        contact_person: "",
        contact_information: "",
        appSystem: "",
        shut_down_time: "",
        network_environment: "",
        ipLocation: "",
        om_unit: "",
        om_contact_person: "",
        om_contact_information: "",
        fault_phenomenon: "",
        files: "",
      },
      loading: false,
      cloudSupplier: "",
      appSystem: "",
      //上云系统列表
      xtList: [],
      // 关机时间下拉数组
      ShutDownList: [
        {
          id: "上班时间",
          name: "上班时间",
        },
        {
          id: "非上班时间",
          name: "非上班时间",
        },
        {
          id: "不能关闭",
          name: "不能关闭",
        },
        {
          id: "其他时间",
          name: "其他时间",
        },
      ],
      // 网络环境下拉数据
      networkList: [
        {
          id: "政务外网",
          name: "政务外网",
        },
        {
          id: "互联网",
          name: "互联网",
        },
      ],
      fileList: [],
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        contact_person: [
          {
            required: true,
            message: "请输入联系人员",
            trigger: "blur",
          },
        ],
        contact_information: [
          {
            required: true,
            message: "请输入联系方式",
            trigger: "blur",
          },
        ],
        appSystem: [
          {
            required: true,
            message: "请选择应用系统",
            trigger: "change",
          },
        ],
        shut_down_time: [
          {
            required: true,
            message: "请选择关机时间",
            trigger: "change",
          },
        ],
        network_environment: [
          {
            required: true,
            message: "请选择网络环境",
            trigger: "change",
          },
        ],
        ipLocation: [
          {
            required: true,
            message: "请输入IP地址",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.GetListSelect();
  },
  methods: {
    previewFile(item) {
      this.dialogImageUrl = item.url;
      this.dialogVisible = true;
    },
    changeappSystem(val) {
      this.xtList.forEach((item) => {
        if (item.id == val) {
          this.cloudSupplier = item.supplierCode;
        }
      });
    },
    GetListSelect() {
      AllcloudUpList().then((response) => {
        this.xtList = response.rows;
      });
    },
    handleChange(res, fileList) {
      this.fileList = fileList;
    },
    DeleteFile(data, index) {
      this.fileList = this.fileList.filter((item) => {
        if (item.uid == data.uid) {
        } else {
          return item;
        }
      });
    },
    // 返回上级
    ReturnSuperior() {
      this.$store.state.tagsView.visitedViews.splice(
        this.$store.state.tagsView.visitedViews.findIndex((item) => item.path === this.$route.path),
        1
      );
      this.$destroy(this.$options.name);
      this.$router.go(-1);
    },
    sumit() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.loading = true;
          if (this.fileList.length > 0) {
            let Files = new FormData();
            Files.append("key", "file");
            this.fileList.forEach((item) => {
              if (item.raw) {
                Files.append("file", item.raw);
              }
            });
            uploadFile(Files)
              .then((response) => {
                this.fileList = [];
                let obj = {
                  formData: this.form,
                  formDefKey: "appFailure",
                  variables: {
                    cloudSupplier: this.cloudSupplier.toLowerCase() + "_cloud_provider",
                    deptId: sessionStorage.getItem("deptId"), //当前登录人部门
                    deptScope: "UP_CASCADE", //部门范围，向上级联
                  },
                  title: this.form.title,
                  files: response.data,
                };
                definition("yunwei_yygz", obj)
                  .then((res) => {
                    if (res.code == 200) {
                      this.$message({
                        message: res.msg,
                        type: "success",
                      });
                      this.form = {};
                      this.ReturnSuperior();
                      this.loading = false;
                    }
                  })
                  .catch((err) => {
                    this.loading = false;
                  });
              })
              .catch((err) => {
                this.loading = false;
              });
          } else {
            let obj = {
              formData: this.form,
              variables: {
                cloudSupplier: this.cloudSupplier.toLowerCase() + "_cloud_provider",
                deptId: sessionStorage.getItem("deptId"), //当前登录人部门
                deptScope: "UP_CASCADE", //部门范围，向上级联
              },
              formDefKey: "appFailure",
              title: this.form.title,
            };
            definition("yunwei_yygz", obj)
              .then((res) => {
                if (res.code == 200) {
                  this.$message({
                    message: res.msg,
                    type: "success",
                  });
                  this.form = {};
                  this.ReturnSuperior();
                  this.loading = false;
                }
              })
              .catch((err) => {
                this.loading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.dialog {
  .title {
    text-align: left;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 4px solid #38b3aa;
  }
  .Subhead {
    text-align: left;
    margin-bottom: 20px;
    font-size: 14px;
    font-weight: bold;
    padding-left: 4px;
    border-left: 2px solid #38b3aa;
  }
  .tabletitle {
    width: 100%;
    text-align: center;
    font-weight: bold;
    border: 1px solid rgb(248, 248, 249);
    height: 40px;
    line-height: 40px;
    border-bottom: none;
  }
}
</style>
